<template>
  <div id="app">
    <div class="wrap">
      <mt-cell title="坐落位置" class="comm-pad" >
        <span @click="selectposition">{{position}}</span>
      </mt-cell>
      <mt-field label="详细地址" placeholder="如：阡陌路聚光中心" v-model="address"></mt-field>
      <mt-field label="门牌号" placeholder="如：B座702室" v-model="number"></mt-field>
      <mt-field label="房产面积" placeholder="单位（m²）" v-model="area"></mt-field>
      <mt-field label="室" placeholder="填入数字" type="number" v-model="shi"></mt-field>
      <mt-field label="厅" placeholder="填入数字" type="number" v-model="ting"></mt-field>
      <mt-field label="厨" placeholder="填入数字" type="number" v-model="chu"></mt-field>
      <mt-field label="卫" placeholder="填入数字" type="number" v-model="wei"></mt-field>
      <el-radio-group size="medium" v-model="type">
        <el-radio :label="3">精装</el-radio>
        <el-radio :label="6">简装</el-radio>
        <el-radio :label="9">混搭</el-radio>
      </el-radio-group>
      <mt-radio
        :options="[]"
        title="装修类型 : (装修有精装、简装、混搭三种，另有中式、欧式、美式)">
      </mt-radio>
      <el-radio-group size="medium" v-model="type">
        <el-radio :label="3">全包</el-radio>
        <el-radio :label="6">半包</el-radio>
        <el-radio :label="9">混合包</el-radio>
      </el-radio-group>
      <mt-radio
        :options="[]"
        title="装修承包 : (承包类型有全包、半包、混合包三种)">
      </mt-radio>
      <el-row style="text-align:center" type="flex" justify="space-between">
        <el-col :span="12">
          <el-checkbox size="small" v-model="checked3" label="全款购房" border></el-checkbox>
        </el-col>
        <el-col :span="12">
          <el-checkbox size="small" v-model="checked3" label="房产证明" border></el-checkbox>
        </el-col>
      </el-row>
      <div v-show="checked3.length">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i  v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">购房合同</div>
        </el-upload>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">购房合同</div>
        </el-upload>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">购房合同</div>
        </el-upload>
      </div>
      <mt-radio
        class="desc"
        :options="[]"
        title="房产证明相关文件规则，1：上传房产证附件；2.上传购房合同+全款发票附件；3.上传购房合同+首付款支付发票+按揭发票附件">
      </mt-radio>
      <mt-radio
        :options="[]"
        title="申请人信息">
      </mt-radio>
      <mt-field label="真实名称" placeholder="同有效证件名称" v-model="number"></mt-field>
      <mt-field label="联系电话" placeholder="手机号或座机电话号" v-model="number"></mt-field>
      <mt-field label="身份证号码" placeholder="仅支持中华人民共和国区民身份证" v-model="number"></mt-field>
      <mt-radio
        title="婚姻状况"
        :options="[]">
      </mt-radio>
      <el-radio-group size="medium" v-model="hunying">
        <el-radio :label="3">已婚</el-radio>
        <el-radio :label="6">未婚</el-radio>
      </el-radio-group>
      <mt-radio
        v-show="hunying===3"
        :options="[]"
        title="结婚证附件">
      </mt-radio>
      <el-row v-show="hunying===3" type="flex"  justify="center">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">结婚证明</div>
        </el-upload>
      </el-row>
      <mt-radio
        v-show="hunying===3"
        :options="[]"
        title="夫妻、配偶信息">
      </mt-radio>
      <mt-field  v-show="hunying===3" label="真实姓名" placeholder="真实姓名" v-model="name2"></mt-field>
      <mt-field  v-show="hunying===3" label="联系电话" placeholder="联系电话" v-model="phone2"></mt-field>
      <mt-field  v-show="hunying===3" label="身份证号" placeholder="身份证号" v-model="shenfenzheng2"></mt-field>
      <el-row v-show="hunying===3" type="flex"  justify="center">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">配偶身份证反面照</div>
        </el-upload>
      </el-row>
      <el-row v-show="hunying===3" type="flex"  justify="center">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">配偶身份证正面照</div>
        </el-upload>
      </el-row>
      <el-row v-show="hunying===3" type="flex"  justify="center">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div class="upload-item">配偶户口照片</div>
        </el-upload>
      </el-row>
      <mt-radio
        :options="[]"
        title="紧急联系人信息">
      </mt-radio>
      <mt-field label="联系人名称" placeholder="联系人名称" v-model="number"></mt-field>
      <mt-field label="联系人电话" placeholder="联系人电话" v-model="number"></mt-field>
      <mt-field label="装修总额" placeholder="装修总额" v-model="number"></mt-field>
      <mt-field label="贷款金额" placeholder="贷款金额" v-model="number"></mt-field>
      <mt-cell class="comm-pad"  title="还款分期">
        <span @click="selectfenqi">{{fenqi}}</span>
      </mt-cell>
      <mt-cell class="comm-pad"  title="还款银行">
        <span @click="selectbank">{{bank}}</span>
      </mt-cell>
      <mt-field label="还款账号" placeholder="还款账号" v-model="number"></mt-field>
      <mt-field label="装修合同号" placeholder="与装修公司签订的装修协议合同编号" v-model="number"></mt-field>
      <mt-field label="贷款金额" placeholder="贷款金额" v-model="number"></mt-field>
      <mt-field label="贷款金额" placeholder="贷款金额" v-model="number"></mt-field>
      <mt-field label="贷款金额" placeholder="贷款金额" v-model="number"></mt-field>
      <div style="text-align:center;padding:5px;">
        <mt-button @click.native="submit">提交</mt-button>
      </div>
      <mt-popup
      style="width:100%;"
      v-model="positionP"
      position="bottom">
      <mt-picker :slots="slots" @change="positionChange"></mt-picker>
      </mt-popup>
      <mt-popup
      style="width:100%;"
      v-model="bankp"
      position="bottom">
      <mt-picker :slots="bankslots" @change="bankChange"></mt-picker>
      </mt-popup>
      <mt-popup
      style="width:100%;"
      v-model="fenqiP"
      position="bottom">
      <mt-picker :slots="fenqislots" @change="fenqiChange"></mt-picker>
      </mt-popup>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checked3:[],
        imageUrl:'',
        shenfenzheng2:'',
        phone2:'',
        name2:'',
        fenqi:'',
        fenqiP:false,
        bankp:false,
        bank:'',
        fangchan:false,
        allmoney:false,
        type:'',
        hunying:6,
        area:'',
        ting:null,
        chu:null,
        wei:null,
        shi:null,
        username:'',
        position:'',
        number:'',
        positionP:false,
        address:'',
        email:'',
        fenqislots:[
          {
            flex: 1,
            values: ['12期', '24期', '36期', '48期', '60期'],
            textAlign: 'center'
          }
        ],
        bankslots:[
           {
            flex: 1,
            values: ['中国人民银行', '中国建设银行', '中国农业银行','中国工商银行'],
            textAlign: 'center'
          }
        ],
        slots: [
          {
            flex: 1,
            values: ['江西', '浙江', '安徽', '广州', '西安', '上海'],
            textAlign: 'center'
          },{
            flex: 1,
            values: ['江西', '浙江', '安徽', '广州', '西安', '上海'],
            textAlign: 'center'
          }, {
            flex: 1,
            values: ['南昌', '上海', '北京', '天津', '合肥', '珠海'],
            textAlign: 'center'
          }
        ]
      };
    },
    methods: {
      handleAvatarSuccess(){},
      submit(){},
      beforeAvatarUpload(){},
      selectposition(){
        this.positionP=true
      },
      selectbank(){
        this.bankp=true
      },
      selectfenqi(){
        this.fenqiP=true
      },
      bankChange(picker, values){
        this.bank=values[0]
      },
      fenqiChange(picker, values){
        this.fenqi=values[0]
      },
      positionChange(picker, values) {
        console.log(values)
        this.position=values.join('')
      }
    },
    mounted(){
      let html = document.documentElement;
      let hWidth = html.getBoundingClientRect().width;
      html.style.fontSize = hWidth/16+"px"
      window.onresize = function(){ 
        let html = document.documentElement;
        let hWidth = html.getBoundingClientRect().width;
        html.style.fontSize = hWidth/16+"px"
      } 
    }
  }
</script>
<style>
  :root{
    height:100%;
  }
  body{
    height:100%;
    margin:0;
    font-size:16px;
    margin-top:1rem;
  }
  .wrap{
    border:1px solid #ccc;
    width:14rem;
    margin:0 auto;
    border-radius:.2rem;
    padding:1.2rem .3rem .4rem .3rem;
    position:relative;
  }
  .wrap::before{
    content:'易家宝装修贷款申请';
    font-size:.4rem;
    position:absolute;
    top:-.2rem;
    height:.3rem;
    width:6.2rem;
    margin-left:-3.1rem;
    left:50%;
    background:#fff;
    text-align:center;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload{
    width: 7rem;
    height: 7rem;
    margin:.3rem auto!important;
    display:block;
  }
  .avatar-uploader-icon {
    font-size: .1rem;
    color: #8c939d;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
  }
  .avatar {
    width: 1rem;
    height: 1rem;
    display: block;
  }
  .desc .mint-radiolist-title{
    color:red;
  }
  .upload-item{
    position:relative;
    top:2.4rem;
  }
  .avatar-uploader-icon{
    position:relative;
    top:2.2rem;
  }
  .comm-pad .mint-cell-title{
    width:105px!important;
    flex:none;
  }
</style>
